<ng-container *ngIf="total > 0">

  <pagination-template class="page-box" #p="paginationApi"
                       [maxSize]="maxSize"
                       (pageChange)="pageChange.emit($event)" *ngIf="!isMiniMode; else miniMode">

    <div class="page-button">
      <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
        <a (click)="p.isFirstPage() || p.previous()"> < </a>
      </div>
      <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
        <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
          <span>{{ page.label }}</span>
        </a>
        <div *ngIf="p.getCurrent() === page.value" class="active current-page">
          <span >{{ page.label }}</span>
        </div>
      </div>

      <div class="pagination-next" [class.disabled]="p.isLastPage()">
        <a  (click)="p.isLastPage() ||  p.next()"> > </a>
      </div>
    </div>
    <div class="page-input" *ngIf="isShowInput">
      <div class="page-info">
        <span>共</span>
        <strong>{{p.pages[p.pages.length-1]?.value}}</strong>
        <span>页</span>
      </div>
      <div class="input-number">
        <span>跳转到</span>
        <input type="number" min="1" #pageInput [max]="p.pages[p.pages.length-1]?.value" (keyup.enter)="p.setCurrent($event.target.value)" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
        <span>页</span>
      </div>
      <button class="button small" (click)="p.setCurrent(pageInput.value)">确定</button>

    </div>

  </pagination-template>

  <ng-template #miniMode>
    <pagination-template class="mini-page-box" #mp="paginationApi"
                         (pageChange)="pageChange.emit($event)">
      <div class="pagination-previous" [class.disabled]="mp.isFirstPage()">
        <a (click)="mp.isFirstPage() || mp.previous()"> < </a>
      </div>
      <div>{{mp.getCurrent()}}</div>
      <div class="pagination-next" [class.disabled]="mp.isLastPage()">
        <a  (click)="mp.isLastPage() ||  mp.next()"> > </a>
      </div>

    </pagination-template>
  </ng-template>

</ng-container>
